<template>
  <div class="detail-wrap">
    <div class="detail-wrap-left">
      <el-scrollbar>
        <ul class="stage-list">
          <li
            class="stage-item cursor-move handle"
            :class="item.isActive ? 'stage-item-active' : ''"
            v-for="(item, index) in taskList"
            :key="item.id + 'stage'"
            @click="() => activeHandler(index)"
          >
            <div class="stage-cot">
              <div class="title-box">
                <!-- <el-input placeholder="请输入内容" v-model="item.name" /> -->
                <span class="title-cot">{{ item.name }}</span>
              </div>
            </div>
            <div class="stage-time">
              <el-icon><Calendar /></el-icon>
              <span>{{ item?.planStartTime ? dayJs(item?.planStartTime).format("YYYY/MM/DD") : "--" }}</span>
              <span class="stage-line">-</span>
              <span>{{ item?.planEndTime ? dayJs(item?.planEndTime).format("YYYY/MM/DD") : "--" }}</span>
            </div>
            <div class="status" :style="`color: ${taskStatusColor(item.status)}`">
              {{ getDictItem("taskStatus", item.status) }}
            </div>
          </li>
        </ul>
      </el-scrollbar>
    </div>
    <div class="detail-wrap-content">
      <div class="detail-wrap-content-top">
        <div class="select-box">
          <el-select v-model="taskModelId" filterable placeholder="请选择" @change="changeTaskHandler">
            <el-option :key="index + 'select'" v-for="(iem, index) in subStage" :label="iem.name" :value="iem.id"></el-option>
          </el-select>
        </div>
        <div class="ul-list">
          <el-scrollbar ref="scrollbarRef">
            <ul class="list-outcome">
              <li
                :class="{ active: item.isActive }"
                v-for="(item, index) in taskOutFile"
                :key="index"
                @click="e => activeOutcomeHandler(item, index, e)"
              >
                {{ item?.typeName }}
              </li>
            </ul>
          </el-scrollbar>
        </div>
      </div>
      <div class="detail-wrap-content-bottom">
        <el-scrollbar ref="scrollbarContentRef">
          <keep-alive :include="keepAliveName">
            <component
              :is="currentActivePage"
              :type-id="currentTaskThree?.typeId"
              :detail="detail"
              :task="currentTaskTwo"
              :key="mayKey"
            ></component>
          </keep-alive>
        </el-scrollbar>
      </div>
    </div>
    <div class="detail-wrap-right">
      <div class="task-info-wrap">
        <div class="task-info">
          <!-- <span class="task-info-title">{{ currentTask.name || "--" }}阶段</span> -->
          <span class="task-info-title">{{ currentTaskTwo.name || "--" }}</span>
          <!-- <div style="flex: 1"> -->
          <el-scrollbar>
            <ul class="task-info-ul">
              <!-- <li>
                <span>项目阶段</span>
                <span>{{ currentTask.name || "--" }}</span>
              </li> -->
              <!-- <li>
                <span>阶段计划</span>
                <span>
                  <i>{{ currentTask.planStartTime ? dayJs(currentTask.planStartTime).format("YYYY年MM月DD") : "--" }}</i>
                  <i>-</i>
                  <i>{{ currentTask.planEndTime ? dayJs(currentTask.planEndTime).format("YYYY年MM月DD") : "--" }}</i>
                </span>
              </li>
              <li v-show="currentTask.endTime">
                <span>阶段结束</span>
                <span>
                  <i>{{ currentTask.endTime ? dayJs(currentTask.endTime).format("YYYY年MM月DD") : "--" }}</i>
                </span>
              </li> -->
              <!-- <li>
                <span>任务名称</span>
                <span>{{ currentTaskTwo.name || "--" }}</span>
              </li> -->
              <li>
                <span>任务计划</span>
                <span>
                  <el-date-picker
                    v-model="timePlan"
                    type="daterange"
                    start-placeholder="计划开始"
                    end-placeholder="计划结束"
                    format="YYYY/MM/DD"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    class="mr8"
                    :clearable="false"
                    @change="changeTaskTime"
                  />
                  <!-- <i>{{ currentTaskTwo.planStartTime ? dayJs(currentTaskTwo.planStartTime).format("YYYY/MM/DD") : "--" }}</i>
                  <i class="pl10 pr10">~</i>
                  <i>{{ currentTaskTwo.planEndTime ? dayJs(currentTaskTwo.planEndTime).format("YYYY/MM/DD") : "--" }}</i> -->
                </span>
              </li>
              <li v-show="currentTaskTwo.startTime">
                <span>任务开始</span>
                <span>
                  <i>{{ currentTaskTwo.startTime ? dayJs(currentTaskTwo.startTime).format("YYYY/MM/DD") : "--" }}</i>
                </span>
              </li>
              <li v-show="currentTaskTwo.endTime">
                <span>任务结束</span>
                <span>
                  <i>{{ currentTaskTwo.endTime ? dayJs(currentTaskTwo.endTime).format("YYYY/MM/DD") : "--" }}</i>
                </span>
              </li>
              <li>
                <span>负责人</span>
                <span class="mr8">
                  <el-select v-model="currentTaskTwo.userId" @change="changeTaskUser" :filterable="true">
                    <el-option v-for="item in viewUserList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                  </el-select>
                </span>
              </li>
              <li>
                <span class="flex flx-start mr30">
                  <i>任务</i>
                  <i class="ml10">{{ getDictItem("taskStatus", currentTaskTwo.status) }}</i>
                </span>
                <span class="mr30">
                  <div v-show="currentTaskTwo.status === '1790295339517870080'">
                    <el-button size="small" color="#5378F6" @click="changeTaskStatus('1790295366042648576')">开始任务</el-button>
                  </div>
                  <div v-show="currentTaskTwo.status === '1790295366042648576'">
                    <el-button size="small" type="danger" @click="changeTaskStatus('1790295395008512000')">搁置任务</el-button>
                    <el-button size="small" type="success" @click="changeTaskStatus('1790295418777632768')">完成任务</el-button>
                  </div>
                  <div v-show="currentTaskTwo.status === '1790295395008512000'">
                    <el-button size="small" color="#5378F6" @click="changeTaskStatus('1790295366042648576')">继续任务</el-button>
                    <el-button size="small" type="success" @click="changeTaskStatus('1790295418777632768')">完成任务</el-button>
                  </div>
                  <div v-show="currentTaskTwo.status === '1790295418777632768'">
                    <el-button size="small" type="info" disabled>已完成</el-button>
                  </div>
                  <!-- <el-select v-model="currentTaskTwo.status" @change="changeTaskStatus">
                    <el-option v-for="item in getDict('taskStatus')" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select> -->
                </span>
              </li>
            </ul>
            <ul class="task-info-ul" v-show="!isFile">
              <li>
                <span>文档名称</span>
                <span>{{ currentTaskThree?.typeName || "--" }}</span>
              </li>
              <li v-show="currentTaskThree?.outcomeTime">
                <span>填表时间</span>
                <span>
                  <i>{{
                    currentTaskThree?.outcomeTime ? dayJs(currentTaskThree?.outcomeTime).format("YYYY-MM-DD HH:mm:ss") : "--"
                  }}</i>
                </span>
              </li>
              <li v-show="currentTaskThree?.userName">
                <span>填表人</span>
                <span>
                  <img v-show="currentTaskThree?.userAvatarUrl" :src="urlResource + currentTaskThree?.userAvatarUrl" alt="" />
                  <span>{{ currentTaskThree?.userName || "--" }}</span>
                </span>
              </li>
            </ul>
            <ul class="task-info-ul" v-if="isFile" :key="activeList.three">
              <li>
                <span>文档名称</span>
                <div class="upload-wrap">
                  <span v-show="currentTaskThree.originalFileName">{{ currentTaskThree.originalFileName || "--" }}</span>
                  <el-button @click="visible = true" type="primary">{{
                    currentTaskThree.originalFileName ? "重新上传" : "上传文件"
                  }}</el-button>
                  <!-- <Upload
                    v-model:file-list="fileList"
                    :prefix-data="PROJECT"
                    :multiple="false"
                    :show-file-list="false"
                    :limit="1"
                    height="40px"
                    @change="e => addProjectPlanFn(e)"
                  >
                    <el-button type="primary">{{ currentTaskThree.originalFileName ? "重新上传" : "上传文件" }}</el-button>
                  </Upload> -->
                </div>
              </li>
              <li v-show="currentTaskThree.outcomeTime">
                <span>上传时间</span>
                <span>
                  <i>{{
                    currentTaskThree.outcomeTime ? dayJs(currentTaskThree.outcomeTime).format("YYYY-MM-DD HH:mm:ss") : "--"
                  }}</i>
                </span>
              </li>
              <li v-show="currentTaskThree.userName">
                <span>上传者</span>
                <span>
                  <img v-show="currentTaskThree.userAvatarUrl" :src="urlResource + currentTaskThree.userAvatarUrl" alt="" />
                  <span>{{ currentTaskThree.userName || "--" }}</span>
                </span>
              </li>
            </ul>
          </el-scrollbar>
          <!-- </div> -->
        </div>
      </div>
    </div>
    <UploadModal
      :prefix-data="PROJECT"
      accept="*"
      :limit-number="1"
      @success="addProjectPlanFn"
      v-model:visible="visible"
      v-if="visible"
    />
  </div>
</template>
<script lang="tsx" setup>
import { ref, onMounted, inject, computed, watch, onUnmounted } from "vue";
import dayJs from "dayjs";
import { useDict } from "@/hooks/useDict";
import mittBus from "@/utils/mittBus";
// import Upload from "@/components/Upload/upload.vue";
import { PROJECT } from "@/constants";
import { ElMessage } from "element-plus";
import { storeToRefs } from "pinia";
import { createCustomComponent, clear } from "@/components/customComponent/index.tsx";
import UploadModal from "@/components/Upload/UploadModal.vue";
// component
import Meeting from "./content/Meeting.vue";
import Member from "./content/Member.vue";
import Preview from "./content/Preview.vue";
import Review from "./content/Review.vue";
import Boom from "./content/Boom.vue";
import Record from "./content/Record.vue";
import Progress from "./content/Progress.vue";
import ProductVerify from "./content/ProductVerify.vue";
// api
import {
  getProjectDetail,
  addProjectFile,
  updateProjectTask,
  addProjectTaskSaveOutcomeInfo,
  updateProjectTaskPlan
} from "@/api/modules/project";
import { getListAllUser } from "@/api/modules/sys";

const projectId = inject("projectId");
// hook
const { getDictItem } = useDict(["taskStatus", "taskStatus"]); // "projectStage", "taskPriorityId", getDict
import { useKeepAliveStore } from "@/stores/modules/keepAlive";
// 变量
const visible = ref(false);
const keepAliveStore = useKeepAliveStore();
const { keepAliveName } = storeToRefs(keepAliveStore);
const viewUserList = ref([]);
let timePlan = ref([]);
let taskList = ref([]);
let taskModelId = ref("");
let taskOutFile = ref([]);
let currentTask = ref({}); // 当前一级
let currentTaskTwo = ref({}); // 当前二级
let currentTaskThree = ref({}); // 当前三级
const scrollbarRef = ref(null);
const scrollbarContentRef = ref(null);
let detail = ref({});
let mayKey = ref("");
const urlResource = window?.staticConfig.urlResource;
// 组件映射
const componentMap: any = {
  meeting: Meeting,
  member: Member,
  preview: Preview,
  review: Review,
  bom: Boom,
  record: Record,
  progress: Progress,
  productVerify: ProductVerify
};
// TODO 状态记录
let activeList = ref({
  one: 0,
  two: 0,
  three: 0
});
let file = ref("");
let fileList = ref([]);
// computed
const subStage = computed(() => {
  return taskList.value[taskList.value.findIndex(item => item.isActive)]?.projectTaskModel || [];
});

const currentActivePage = computed(() => {
  scrollbarContentRef?.value?.setScrollTop(0);
  let obj = taskOutFile.value.find((item: any) => item.isActive);
  nameKey();
  if (obj) {
    const component = componentMap[obj.remark];
    return createCustomComponent(
      currentTask.value.id + "-" + currentTaskTwo.value.id + "-" + currentTaskThree.value?.typeId,
      component
    );
  }
  return "OutLine";
});

const isFile = computed(() => {
  return currentTaskThree.value.remark === "preview";
});

// watchEffect
watch(
  () => subStage.value,
  () => {
    taskModelId.value = activeList.value.two ? activeList.value.two : subStage?.value[0]?.id;
    // 当前二级数据
    currentTaskTwo.value = activeList.value.two
      ? subStage?.value[subStage?.value.findIndex(item => item.id === activeList.value.two)]
      : subStage?.value[0];
    // 当前三级的outcome数据
    taskOutFile.value = activeList.value.two
      ? subStage?.value[subStage?.value.findIndex(item => item.id === activeList.value.two)]?.outcome
      : subStage?.value[0]?.outcome || [];

    // 三级初始选中
    taskOutFile.value.forEach((item, i) => {
      item.isActive = i === activeList.value.three;
    });
    // 当前三级数据选中数据
    currentTaskThree.value = taskOutFile.value[activeList.value.three] || {};
    // setCache();
  }
);
watch(
  () => currentTaskTwo.value,
  () => {
    // 获取子任务时间
    timePlan.value = [
      currentTaskTwo.value.planStartTime ? currentTaskTwo.value.planStartTime : "",
      currentTaskTwo.value.planEndTime ? currentTaskTwo.value.planEndTime : ""
    ];
  },
  { immediate: true }
);
// 方法
const nameKey = (id?: string) => {
  mayKey.value = `${currentTask.value.id}-${currentTaskTwo.value.id}-${currentTaskThree.value?.typeId}-0-${id}`;
};
const taskStatusColor = (val: string) => {
  switch (val) {
    case "1790295339517870080": // 未开始
      return "#999999 ";
    case "1790295366042648576": // 进行中
      return "#5378F6";
    case "1790295395008512000": // 搁置中
      return "#F65353";
    case "1790295418777632768": // 已完成
      return "#74D98C";
  }
};

const getListAllUserFn = async () => {
  const { data } = await getListAllUser();
  viewUserList.value = data;
};
const addProjectPlanFn = async file => {
  try {
    await addProjectFile({
      projectId,
      typeId: currentTaskThree.value.typeId,
      name: file.name,
      path: file.path,
      originalFileName: file.originalFileName
    });
    await addProjectTaskSaveOutcomeInfo({
      taskId: taskModelId.value,
      typeId: currentTaskThree.value.typeId,
      originalFileName: file.originalFileName,
      path: file.path,
      name: file.name
    });
    // 清除缓存
    removeCache();
    // mayKey.value++;
    nameKey(1);
    await getProjectDetailFn(projectId);

    // console.log("*****");
    // console.log(keepAliveName, keepAliveStore);
    mittBus.emit("ProjectPlanRefresh");
    fileList.value = [];
    ElMessage.success("上传成功");
  } catch (e) {
    console.log(e);
  }
};
const setScrollLeft = (val: number) => {
  scrollbarRef?.value?.setScrollLeft(val);
};
// 获取项目详情
const getProjectDetailFn = async (id, isActive = true) => {
  let { data } = await getProjectDetail({ id });
  if (isActive) {
    taskList.value = data.taskModels;
    taskList.value.forEach((item, i) => {
      item.isActive = i === activeList.value.one;
    });
    currentTask.value = taskList.value[activeList.value.one];
  }
  detail.value = data;
};

const activeHandler = (index: number) => {
  taskList.value.forEach((item, i) => {
    item.isActive = i === index;
  });
  setScrollLeft(0);
  currentTask.value = taskList.value[index];
  // 状态保持
  activeList.value.one = index;
  activeList.value.two = 0;
  activeList.value.three = 0;
};
const changeTaskHandler = val => {
  taskModelId.value = val;
  const task = subStage.value.find(item => item.id === val);
  taskOutFile.value = task.outcome || [];
  taskOutFile.value.forEach((item, i) => {
    item.isActive = i === 0;
  });
  currentTaskThree.value = taskOutFile.value[0] || {};
  currentTaskTwo.value = task;
  // 状态保持
  activeList.value.two = val;
  activeList.value.three = 0;
  setScrollLeft(0);
};
// 设置缓存
const setCache = () => {
  if (currentTaskThree.value.remark === "preview") {
    const name = currentTask.value.id + "-" + currentTaskTwo.value.id + "-" + currentTaskThree.value?.typeId;
    keepAliveStore.addKeepAliveName(name);
  }
};
const removeCache = () => {
  const name = currentTask.value.id + "-" + currentTaskTwo.value.id + "-" + currentTaskThree.value?.typeId;
  keepAliveStore.removeKeepAliveName(name);
};
const activeOutcomeHandler = (itm, index, e) => {
  taskOutFile.value.forEach((item, i) => {
    item.isActive = i === index;
  });
  // 设置滚动条位置居中
  const containerW = e.target.parentNode.parentNode.offsetWidth;
  const scroll = e.target.offsetLeft - containerW / 2 + e.target.offsetWidth / 2;
  setScrollLeft(scroll);
  activeList.value.three = index;
  currentTaskThree.value = itm;
  // console.log(e.target.offsetLeft, e.target.parentNode.offsetWidth, e.target.offsetWidth, e.target.scrollWidth);
  // 设置缓存
  // console.log("PPPPPPP");
  // console.log(taskOutFile.value, itm);

  // setCache();
};
// 改变任务状态
const changeTaskStatus = async val => {
  try {
    const taskOrigin = JSON.parse(JSON.stringify(currentTaskTwo.value));
    taskOrigin.outcome.forEach(item => {
      delete item.isActive;
      delete item.name;
    });
    taskOrigin.status = val;
    delete taskOrigin.tableColRef;
    delete taskOrigin.serialNumber;
    await updateProjectTask(taskOrigin);
    getProjectDetailFn(projectId);
    ElMessage.success("状态更新成功");
  } catch (e) {
    console.log(e);
  }
};

// 改变任务负责人
const changeTaskUser = async val => {
  try {
    const taskOrigin = JSON.parse(JSON.stringify(currentTaskTwo.value));
    taskOrigin.outcome.forEach(item => {
      delete item.isActive;
      delete item.name;
    });
    delete taskOrigin.tableColRef;
    delete taskOrigin.serialNumber;
    taskOrigin.userId = val;
    const user = viewUserList.value.find(item => item.id === val);
    if (user) taskOrigin.userName = user.name;
    await updateProjectTask(taskOrigin);
    getProjectDetailFn(projectId);
    ElMessage.success("变更负责人成功");
  } catch (e) {
    console.log(e);
  }
};
// 改变任务计划时间
const changeTaskTime = async val => {
  try {
    await updateProjectTaskPlan({
      id: currentTaskTwo.value.id,
      planStartTime: val[0],
      planEndTime: val[1]
    });
    getProjectDetailFn(projectId);
    ElMessage.success("更改成功");
  } catch (e) {
    timePlan.value = [
      currentTaskTwo.value.planStartTime ? currentTaskTwo.value.planStartTime : "",
      currentTaskTwo.value.planEndTime ? currentTaskTwo.value.planEndTime : ""
    ];
    // getProjectDetailFn(projectId);
    console.log(e);
  }
};

onMounted(() => {
  getProjectDetailFn(projectId);
  getListAllUserFn();
});

mittBus.on("ProjectDetailRefresh", () => {
  getProjectDetailFn(projectId, false);
});
mittBus.on("ProjectPlanFile", obj => {
  file.value = obj;
});
// 更新文件时间
mittBus.on("ProjectFileTime", async () => {
  await addProjectTaskSaveOutcomeInfo({
    taskId: taskModelId.value,
    typeId: currentTaskThree.value.typeId
  });
  getProjectDetailFn(projectId);
});
mittBus.on("fileLoaded", () => {
  setCache();
  console.log(keepAliveStore);
});
onUnmounted(() => {
  mittBus.off("ProjectFileTime");
  mittBus.off("ProjectDetailRefresh");
  mittBus.off("ProjectPlanFile");
  mittBus.off("fileLoaded");
  clear();
  keepAliveStore.setKeepAliveName();
});
</script>
<style lang="scss" scoped>
.detail-wrap {
  display: flex;
  justify-content: space-between;
  height: 100%;
  ul,
  li {
    padding: 0;
    margin: 0;
    list-style: none;
  }
  .stage-list,
  .stage-item {
    padding: 0;
    margin: 0;
    list-style: none;
  }
  p {
    margin: 0;
  }
  i {
    font-style: normal;
  }
  :deep(.el-input__wrapper) {
    display: flex;
    height: 42px;
    line-height: 42px;
    background: $project-background;
    box-shadow: none;
    .el-input__suffix-inner > :first-child {
      margin-right: 10px;
      margin-left: 0;
    }
    .el-input__inner {
      width: 100%;
      height: 100%;
      font-size: 14px;
      font-weight: 400;
      color: rgb(51 51 51 / 100%);
    }
  }
  :deep(.el-select) {
    width: 100%;
    min-width: 100px;
    .el-input.is-focus {
      .el-input__wrapper {
        box-shadow: none !important;
      }
    }
    .el-input__wrapper.is-focus {
      box-shadow: none !important;
    }
  }
  :deep(.el-date-editor) {
    .el-icon {
      margin-right: 4px;
    }
    .el-icon:last-child {
      display: none;
    }
  }
  .stage-list {
    padding-bottom: 1px;
    .stage-item {
      position: relative;
      box-sizing: border-box;
      display: flex;
      flex-flow: column nowrap;
      padding: $project-padding-margin;
      margin: $project-padding-margin;
      cursor: pointer;
      background: $project-background;
      border-radius: 6px;
      .status {
        position: absolute;
        top: 0;
        right: 0;
        min-width: 56px;
        padding: 2px 7px;
        font-size: 14px;
        font-weight: 400;
        color: #999999;
        background: #ffffff;
        border-radius: 0 0 0 10px;
      }
      .stage-cot {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .stage-time {
        display: flex;
        align-items: center;
        margin-top: 0;
        font-size: 14px;
        color: #999999;
        :deep(.el-date-editor) {
          .el-range-input {
            cursor: pointer;
          }
        }
        .el-icon {
          margin-right: 4px;
        }
        .stage-line {
          padding: 0 6px;
        }
      }

      // &:hover {
      //   .title-box {
      //     .el-input {
      //       display: block;
      //     }
      //     .title-cot {
      //       display: none;
      //     }
      //   }
      // }
    }
    .drop-icon {
      display: flex;
      flex: 1;
      justify-content: space-between;
      width: 100%;
      margin-bottom: 5px;
    }
    .title-box {
      display: flex;
      flex: 3;
      align-items: center;
      height: 46px;
      overflow: hidden;
      font-size: 16px;
      font-weight: 600;
      color: #333333;
      text-align: left;
      :deep(.el-input) {
        display: none;
        font-size: 16px;
        border: 0;
        box-shadow: none;
        .el-input__wrapper {
          width: 100%;
          padding: 0;
          border: 0;
          box-shadow: none;
          .el-input__inner {
            height: 32px;
            padding: 0;
            font-size: 16px;
            font-weight: 600;
            line-height: 32px;
            color: #333333;
            border: 0;
            box-shadow: none;
          }
        }
      }
      .title-cot {
        display: block;
        width: 100%;
        height: 32px;
        overflow: hidden;
        line-height: 32px;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .stage-item-active {
      box-sizing: border-box;

      // outline: 1px solid var(--el-color-primary);
      background: var(--el-color-primary) !important;
      .title-cot {
        color: #ffffff;
      }
      .stage-time {
        color: #ffffff;
      }
      .status {
        color: #74d98c;
      }
    }
  }
  .detail-wrap-left {
    flex: 0 0 $project-slide-width;
    overflow: hidden;
    background: #ffffff;
  }
  .detail-wrap-right {
    display: flex;
    flex: 0 0 $project-slide-width;
    flex-flow: column nowrap;
    overflow: hidden;
    .task-info-wrap {
      box-sizing: border-box;
      flex: 1;
      padding-bottom: 30px;
      padding-left: $project-padding-margin;
      overflow: hidden;
      background: #ffffff;
      :deep(.el-scrollbar__view) {
        // display: flex;
        // align-items: center;
        height: auto !important;
      }
    }
    .task-info {
      box-sizing: border-box;
      display: flex;
      flex: 1;
      flex-flow: column nowrap;
      height: 100%;
      overflow: hidden;
      &-title {
        flex: 0 0 64px;
        font-size: 16px;
        font-weight: 600;
        line-height: 64px;
        color: #333333;
      }
      &-ul {
        flex: 1;
        li {
          display: flex;
          flex-flow: column nowrap;
          margin-top: 20px;
          span:first-child {
            margin-bottom: 20px;
            font-size: 14px;
            font-weight: 400;
            color: #999999;
          }
          > span:last-child {
            display: flex;
            align-items: center;
            font-size: 14px;
            font-weight: 400;
            color: #333333;
            img {
              width: 32px;
              height: 32px;
              margin-right: 10px;
              border-radius: 50%;
            }
          }
        }
        .upload-wrap {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          span:first-child {
            box-sizing: border-box;
            flex: 2;
            height: 40px;
            padding: 0 20px;
            margin: 0;
            margin-right: 10px;
            overflow: hidden;
            line-height: 40px;
            text-overflow: ellipsis;
            white-space: nowrap;
            background: $project-background;
            border-radius: 4px;
          }
          :deep(.upload-box-s) {
            // flex: 1;
            margin-right: 20px;
            .el-upload__tip {
              margin: 0;
            }
          }
        }
      }
    }
    .task-info-bottom {
      flex: 1;
      margin-top: 10px;
    }
  }
  .detail-wrap-content {
    display: flex;
    flex: 1;
    flex-flow: column nowrap;
    margin: 0 10px;
    overflow: hidden;
    .select-box {
      flex: 0 0 160px;
      width: 160px;
      margin-right: 30px;

      // .select-box-item {
      //   position: relative;
      //   gap: 50px;
      //   .el-icon {
      //     position: absolute;
      //     top: 0;
      //     right: 0;
      //     display: none;
      //     cursor: pointer;
      //   }
      //   &:hover {
      //     .el-icon {
      //       display: block;
      //     }
      //   }
      // }
    }
    .detail-wrap-content-top {
      box-sizing: border-box;
      display: flex;
      flex: 0 0 72px;
      align-items: center;
      justify-content: space-between;
      padding: 10px 10px 10px 14px;
      overflow: hidden;
      background: #ffffff;
      .ul-list {
        display: flex;
        flex: 1;
        align-items: center;

        // width: max-content;
        height: 100%;
        overflow: hidden;
        line-height: 100%;
        .el-scrollbar,
        .el-scrollbar__wrap,
        :deep(.el-scrollbar__view) {
          display: flex;
          align-items: center;
          height: 100%;
        }
      }
      .list-outcome {
        display: flex;
        flex: 1;
        flex-flow: row nowrap;
        flex-shrink: 0;
        align-items: center;
        width: max-content;
        height: 100%;
        font-size: 14px;
        li {
          display: flex;
          align-content: center;
          margin-right: 40px;
          font-weight: 400;
          color: #999999;
          white-space: nowrap;
          cursor: pointer;
        }
        .active {
          font-weight: 600;
          color: var(--el-color-primary);
        }
      }
    }
    .detail-wrap-content-bottom {
      flex: 1;
      margin-top: 10px;
      overflow: hidden;
      background: #ffffff;
      .el-scrollbar,
      .el-scrollbar__wrap,
      :deep(.el-scrollbar__view) {
        // display: flex;
        // align-items: center;
        // width: 100%;

        // // justify-content: center;
        // height: 100%;
      }
    }
  }
}
</style>
